@if mgwt.css pretty {
	@external mgwt-Button, active, small, round, important, confirm;
	
}


@if mgwt.os iphone {

	.mgwt-Button {
		border: solid 1px rgba(0,0,0, 0.5);
		\-webkit-border-radius: 6px;
		\-webkit-box-shadow: 2px 2px 3px #999; 	
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(234,234,234,0.90)), color-stop(0.5, rgba(195,195,195,0.70)), color-stop(0.5, rgba(166,166,166,0.70)), to(rgba(167,167,167,0.80)))'); 
		color: #000;
		text-shadow: rgba(255, 255, 255, .6) 0 1px 0;
		padding: 9px 13px;
		margin: 5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 19px;
		font-weight: bold;
		text-align: center;
		
	}
	
	.mgwt-Button.active {
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgb(5, 140, 245)),  to(rgb(1, 95, 230)) , color-stop(0.5, rgba(5, 140, 245,0.70)), color-stop(0.5, rgba(1, 95, 230,0.70)) )');
		color: #fff;
		text-shadow: #000 0 1px 0;
		\-webkit-box-shadow: inset rgba(207,207,255,0.75) 0px 1px 1px;
	
	}
	
	.mgwt-Button.small{
		padding: 5px 7px;
		margin: 2px;
		margin-left: 5px;
		margin-right: 5px;
		font-size: 12px;
	}
	
	.mgwt-Button.round {
		border-bottom-left-radius: 16px 16px;
		border-bottom-right-radius: 16px 16px;
		border-top-left-radius: 16px 16px;
		border-top-right-radius: 16px 16px;
	}
	
	.mgwt-Button.important {
		\-webkit-box-shadow: 2px 2px 3px #999; 
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(255,59,59,0.70)), color-stop(0.5, rgba(233,72,72,0.80)), color-stop(0.5, rgba(184,0,0,0.70)), to(rgba(255,0,0,0.80)))'); 
		color: #fff;
		text-shadow: #000 0 1px 0;
		padding: 9px 11px;
	}
	
	.mgwt-Button.important.active {
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(255,30,30,1)), color-stop(0.5, rgba(233,40,40,1)), color-stop(0.5, rgba(184,0,0,1)), to(rgba(255,0,0,1)))'); 
	}
	
	.mgwt-Button.confirm {
		\-webkit-box-shadow: 2px 2px 3px #999; 
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(115,239,115,0.70)), color-stop(0.5, rgba(73,171,14,0.60)), color-stop(0.5, rgba(0,113,0,0.70)), to(rgba(0,150,0,0.80)))'); 
		color: #fff;
		text-shadow: #000 0 1px 0;
		padding: 9px 11px;
	}
	
	.mgwt-Button.confirm.active {
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(80,200,80,1)), color-stop(0.5, rgba(50,150,0,1)), color-stop(0.5, rgba(0,100,0,1)), to(rgba(0,80,0,1)))'); 
		color: #fff;
		text-shadow: #000 0 1px 0;
		\-webkit-box-shadow: inset rgba(207,207,255,0.75) 0px 1px 1px;
		
		
	}
	
}



@if mgwt.os ipad desktop {

	.mgwt-Button {
		border: solid 1px rgba(0,0,0, 0.5);
		\-webkit-border-radius: 6px;
		\-webkit-box-shadow: 2px 2px 3px #999; 	
		/*background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(234,234,234,0.90)), color-stop(0.5, rgba(195,195,195,0.70)), color-stop(0.5, rgba(166,166,166,0.70)), to(rgba(167,167,167,0.80)))'); */
		background-image: literal('-webkit-gradient(linear,left bottom,left top,color-stop(0, #A8ACB9),color-stop(1, #eee))');
		color: #000;
		text-shadow: rgba(255, 255, 255, .6) 0 1px 0;
		padding: 9px 13px;
		margin: 5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 19px;
		font-weight: bold;
		text-align: center;
		
	}
	
	.mgwt-Button.active {
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgb(5, 140, 245)),  to(rgb(1, 95, 230)) )');
		color: #fff;
		text-shadow: #000 0 1px 0;
		\-webkit-box-shadow: inset rgba(207,207,255,0.75) 0px 1px 1px;
	
	}
	
	.mgwt-Button.small{
		padding: 5px 7px;
		margin: 2px;
		margin-left: 5px;
		margin-right: 5px;
		font-size: 12px;
	}
	
	.mgwt-Button.round {
		border-bottom-left-radius: 16px 16px;
		border-bottom-right-radius: 16px 16px;
		border-top-left-radius: 16px 16px;
		border-top-right-radius: 16px 16px;
	}
	
	.mgwt-Button.important {
		\-webkit-box-shadow: 2px 2px 3px #999; 
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(255,59,59,0.70)), color-stop(0.5, rgba(233,72,72,0.80)), color-stop(0.5, rgba(184,0,0,0.70)), to(rgba(255,0,0,0.80)))'); 
		color: #fff;
		text-shadow: #000 0 1px 0;
		padding: 9px 11px;
	}
	
	.mgwt-Button.important.active {
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(255,30,30,1)), color-stop(0.5, rgba(233,40,40,1)), color-stop(0.5, rgba(184,0,0,1)), to(rgba(255,0,0,1)))'); 
	}
	
	.mgwt-Button.confirm {
		\-webkit-box-shadow: 2px 2px 3px #999; 
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(115,239,115,0.70)), color-stop(0.5, rgba(73,171,14,0.60)), color-stop(0.5, rgba(0,113,0,0.70)), to(rgba(0,150,0,0.80)))'); 
		color: #fff;
		text-shadow: #000 0 1px 0;
		padding: 9px 11px;
	}
	
	.mgwt-Button.confirm.active {
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(80,200,80,1)), color-stop(0.5, rgba(50,150,0,1)), color-stop(0.5, rgba(0,100,0,1)), to(rgba(0,80,0,1)))'); 
		color: #fff;
		text-shadow: #000 0 1px 0;
		\-webkit-box-shadow: inset rgba(207,207,255,0.75) 0px 1px 1px;
		
		
	}
	
}

@if mgwt.os android android_tablet {

	.mgwt-Button {
		
		\-webkit-border-radius: 4px;
		
		/*background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(234,234,234,0.90)), color-stop(0.5, rgba(195,195,195,0.70)), color-stop(0.5, rgba(166,166,166,0.70)), to(rgba(167,167,167,0.80)))'); */
		
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(160, 160, 160)) )');
		color: black;
		
		padding: 9px 13px;
		margin: 5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 19px;
		
		text-align: center;
		
		border: 1px solid rgba(0, 0, 0, 0.5);
		
	}
	
	.mgwt-Button.active {
	
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgb(82, 163, 196)), to(rgb(62, 143, 176)) )');
		color: #fff;
		
		
	
	}
	
	.mgwt-Button.small{
		padding: 5px 7px;
		margin: 2px;
		margin-left: 5px;
		margin-right: 5px;
		font-size: 12px;
	}
	
	
	
	.mgwt-Button.important {
		border: 2px solid rgb(82, 163, 196);
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(255,59,59,0.70)),  to(rgba(255,0,0,0.80)))'); 
		
		
		padding: 9px 11px;
		border: 1px solid rgba(0, 0, 0, 0.5);
	}
	
	.mgwt-Button.important.active {
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(255,30,30,0.80)), to(rgba(255,0,0,0.90)))'); 
		color: #fff;
	}
	
	.mgwt-Button.confirm {
		
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(115,239,115,0.70)), to(rgba(0,150,0,0.80)))'); 
		
		
		padding: 9px 11px;
	}
	
	.mgwt-Button.confirm.active {
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(100,220,100,0.70)), to(rgba(0,100,0,0.80)))'); 
		color: #fff;
		
		
		
		
	}
	
	.mgwt-Button.round {
		border-bottom-left-radius: 16px 16px;
		border-bottom-right-radius: 16px 16px;
		border-top-left-radius: 16px 16px;
		border-top-right-radius: 16px 16px;
	}
	
}

/*TODO*/
@if mgwt.os blackberry {

	.mgwt-Button {
		
		\-webkit-border-radius: 4px;
		
		/*background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(234,234,234,0.90)), color-stop(0.5, rgba(195,195,195,0.70)), color-stop(0.5, rgba(166,166,166,0.70)), to(rgba(167,167,167,0.80)))'); */
		background-color: transparent;
		color: white;
		
		padding: 9px 13px;
		margin: 5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 19px;
		text-align: center;
		border: 2px solid rgb(82, 163, 196);
		
	}
	
	.mgwt-Button.active {
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgb(42, 123, 156)), to(rgb(32, 113, 146)) )');
		color: #fff;
		text-shadow: #000 0 1px 0;
		
	
	}
	
	.mgwt-Button.small{
		padding: 5px 7px;
		margin: 2px;
		margin-left: 5px;
		margin-right: 5px;
		font-size: 12px;
	}
	
	.mgwt-Button.round {
		border-bottom-left-radius: 16px 16px;
		border-bottom-right-radius: 16px 16px;
		border-top-left-radius: 16px 16px;
		border-top-right-radius: 16px 16px;
	}
	
	.mgwt-Button.important {
		\-webkit-box-shadow: 2px 2px 3px #999; 
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(255,59,59,0.70)), color-stop(0.5, rgba(233,72,72,0.80)), color-stop(0.5, rgba(184,0,0,0.70)), to(rgba(255,0,0,0.80)))'); 
		color: #fff;
		text-shadow: #000 0 1px 0;
		padding: 9px 11px;
	}
	
	.mgwt-Button.important.active {
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(255,30,30,0.80)), color-stop(0.5, rgba(233,40,40,0.90)), color-stop(0.5, rgba(184,0,0,0.80)), to(rgba(255,0,0,0.90)))'); 
	}
	
	.mgwt-Button.confirm {
		\-webkit-box-shadow: 2px 2px 3px #999; 
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(115,239,115,0.70)), color-stop(0.5, rgba(73,171,14,0.60)), color-stop(0.5, rgba(0,113,0,0.70)), to(rgba(0,150,0,0.80)))'); 
		color: #fff;
		text-shadow: #000 0 1px 0;
		padding: 9px 11px;
	}
	
	.mgwt-Button.confirm.active {
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgba(135,148,203,0.85)), color-stop(0.5, rgba(34,56,159,0.75)), color-stop(0.5, rgba(0,27,145,0.75)), to(rgba(2,59,152,0.65)))'); 
		color: #fff;
		text-shadow: #000 0 1px 0;
		\-webkit-box-shadow: inset rgba(207,207,255,0.75) 0px 1px 1px;
		
		
	}
	
}





